<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min1.css"/>
		<link rel="stylesheet" type="text/css" href="css/index4.css"/>
		<link rel="icon" href="img/favicon2.ico" />
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.js"></script>
	</head>
	<body>
		<header>
			<img src="img/imgxx/logo1.png"/>
			<div class="seach">
				<img src="img/imgxx/logoh1.png"/>
				<span>开始搜索</span>
				<span class="jt"></span>
			</div>
			<nav class="nav1">
				<ul>
					<li><a href="index3.html">图片</a></li>
					<li><a href="">视频</a></li>
					<li><a href="index4.html">字体</a></li>
					<li><a href="">音乐</a></li>
				</ul>
			</nav>
			<div class="us">
					<a href="">价格</a>
					<a href="">供图</a>
					<a href="">
						帮助
						<div class="helps">
							<p>快速指引</p>
							<p>热门回答</p>
							<p>人工服务</p>
						</div>
					</a>
					<a href="">登录/注册</a>
				</div>
				<div class="seach2">
					<div class="inputs">
						<a href="" class="text"/>字体</a>
						<input type="text" name="" id="" value="" placeholder="输入您要搜索的关键字，或从下方分类中选择"/>
						<a href="" class="logo"><img src="img/imgxx/logoh2.png"/></a>
					</div>
					<p class="tip"><img src="img/imgxx/gth.png"/>点击以下标签，即可加入搜索条件，标签最多选择两个</p>
					<ul class="bq">
						<li>站酷</li>
						<li>站酷妙典和风体</li>
						<li>站酷曦冉体</li>
						<li>站酷庆科建黑体</li>
						<li>站酷庆科追梦体</li>
						<li>站酷锐锐体</li>
						<li>站酷彤彤体</li>
						<li>现代</li>
						<li>大气</li>
						<li>力量</li>
					</ul>
					<ul class="bq">
						<li>大气</li>
						<li>硬朗</li>
						<li>清新</li>
						<li>现代</li>
						<li>简约</li>
						<li>活泼</li>
						<li>男性</li>
						<li>女性</li>
						<li>文艺</li>
						<li>温柔</li>
						<li>浪漫</li>
						<li>力量</li>
						<li>纤细</li>
						<li>艺术</li>
						<li>可爱</li>
						<li>时尚</li>
					</ul>
					<ul class="bq">
						<li>宋体</li>
						<li>楷体</li>
						<li>行书</li>
						<li>黑体</li>
						<li>隶书</li>
						<li>草书</li>
						<li>综艺</li>
						<li>书法</li>
						<li>美术</li>
						<li>圆体</li>
					</ul>
					<div class="seach_foot">
						<a href="" class="sjx">热门</a>
						<a href="">类型</a>
						<a href="">风格</a>
					</div>
				</div>	
		</header>
		<section class="section">
			<div  class="imgs">
				<img src="img/imgxx/wenb.png"/>
			</div>
			
			<div class="inputs">
				<a href="" class="text"/>字体</a>
				<input type="text" name="" id="" value="" placeholder="输入您要搜索的关键字，或从下方分类中选择"/>
				<a href="" class="logo"><img src="img/imgxx/logoh1.png"/></a>
			</div>		
		</section>
		<section class="section2">
			<ul class="lb">
				<li>
					<img src="img/imgxx/lb1.png"/>
					<p>站酷打造</p>
					<p>十余载站酷品牌沉淀</p>
					<p>懂设计，更懂设计师</p>
				</li>
				<li>
					<img src="img/imgxx/lb2.png"/>
					<p>匠心品质</p>
					<p>为创意精雕细琢</p>
					<p>为商业量身定制</p>
				</li>
				<li>
					<img src="img/imgxx/lb2.png"/>
					<p>高性价比</p>
					<p>商业用途清晰明了</p>
					<p>一次购买授权终身</p>
				</li>
			</ul>
			<p class="til"><img src="img/imgxx/tittle1.png"/></p>
			<ul class="lb1">
				<li>
					
					<img src="img/imgxx/lb11.png"/>
					<p>站酷妙典风云</p>
				</li>
				<li>
					<img src="img/imgxx/lb12.png"/>
					<p>站酷蔦书体</p>
				</li>
				<li>
					<img src="img/imgxx/lb13.png"/>
					<p>站酷鸿远御风体</p>
				</li>
				<li>
					<img src="img/imgxx/lb14.png"/>
					<p>站酷冷水萧青刻体</p>
				</li>
				<li>
					<img src="img/imgxx/lb15.png"/>
					<p>站酷妙典和风体</p>
				</li>
				<li>
					<img src="img/imgxx/lb16.png"/>
					<p>站站酷庆科追梦体</p>
				</li>
				<li>
					<img src="img/imgxx/lb17.png"/>
					<p>站酷庆科建黑体</p>
				</li>
				<li>
					<img src="img/imgxx/lb18.png"/>
					<p>站酷锐锐体</p>
				</li>
				<li>
					<img src="img/imgxx/lb19.png"/>
					<p>站酷彤彤体</p>
				</li>
				
			</ul>
			<div class="allzt">
				<button>
					<div class="round"></div>
				<span>全部字体</span>
				</button>
			</div>
			<p class="til1">
				<img src="img/imgxx/lb20.png"/>
			</p>
			<ul class="lb1">
				<li>
					<div class="hot">HOT</div>
					<img src="img/imgxx/lb21.png"/>
					<p>站酷锐锐体</p>
				</li>
				<li>
					<img src="img/imgxx/lb22.png"/>
					<p>站酷彤彤体</p>
				</li>
				<li>
					<div class="hot">HOT</div>
					<img src="img/imgxx/lb23.png"/>
					<p>站酷妙典和风体</p>
				</li>
				<li>
					<div class="hot">HOT</div>
					<img src="img/imgxx/lb24.png"/>
					<p>站酷庆科建体</p>
				</li>
				<li>
					<img src="img/imgxx/lb25.png"/>
					<p>站酷曦冉体</p>
				</li>
				<li>
					<img src="img/imgxx/lb26.png"/>
					<p>锐字云字库中长宋体</p>
				</li>				
			</ul>
			<div class="allzt">
				<button>
					<div class="round"></div>
				<span>查看全部</span>
				</button>
			</div>
		</section>
		<footer class="footer">
			<div class="foots">
				<div class="logo">
					<img src="img/imgxx/logo2.png"/>
					<img src="img/imgxx/logo3.png"/>
				</div>
				<div class="foot_right">
					<ul>
						<li>关于站酷海洛</li>
						<li>关于我们</li>
						<li>套餐价格</li>
						<li>海洛API</li>
						<li>授权协议</li>
						<li>隐私政策</li>
						<li>联系我们</li>
					</ul>
					<ul>
						<li>常见问题</li>
						<li>授权/版权</li>
						<li>购买/支付</li>
						<li>下载问题</li>
						<li>退款/退图</li>
						<li>流程相关</li>
						<li>关于套餐</li>
						<li>关于账户</li>
					</ul>
					<ul>
						<li>更多产品</li>
						<li>创意供图平台</li>
						<li>海洛PLUS</li>
					</ul>
					<ul>
						<li>关注我们</li>
						<li>
							<img src="img/imgxx/weixincode.jpg"/>
						</li>
						<li>更多创意</li>
						<li>产品咨询</li>
					</ul>
				</div>
			</div>
			<p>
				<span>北京站酷网络科技有限公司旗下产品</span> 
				<a href="">&nbsp;京ICP备11017824号-7</a>
				<a href="">京ICP证130164号</a> 
				<a href=""><img src=""/><img src="img/imgxx/f_logo.png"/>京公网安备 11010502034683号</a>
				<span>Copyright © 2014-2018 站酷海洛 版权所有</span>
				<a href=""><img src="img/imgxx/f_logo1.png" alt="" /></a>
				<a href=""><img src="img/imgxx/f_logo2.png" alt="" /></a>
				<a href=""><img src="img/imgxx/f_logo3.png" alt="" /></a>
				
			</p>
		</footer>
		<nav class="r_nav">
			<ul>
				<li>
					<img src="img/imgxx/xrlb-icon.png"/>
					<div class="lis1">
						<img src="img/imgxx/gift-main.png" alt="" />
						<span><img src="img/imgxx/close.svg"/></span>
					</div>
				</li>
				<li>
					<img src="img/imgxx/xrlb-icon1.png"/>
					<div class="lis2">
						<span>在线客服</span>
					</div>
					
				</li>
				<li>
					<img src="img/imgxx/xrlb-icon2.png"/>
					<div class="lis3">
						<p>图片清单</p>
						<p>视频清单</p>
						<p>字体清单</p>
						<p>音乐清单</p>
					</div>
				</li>
				<li>
					<img src="img/imgxx/xrlb-icon3.png"/>
					<div class="lis2">
						<span>在线客服</span>
					</div>
				</li>
				<li class="tops">
					<img src="img/imgxx/xrlb-icon4.png"/>
					<div class="lis2">
						<span>在线客服</span>
					</div>
				</li>
			</ul>
			
		</nav>
		
	</body>
	<script type="text/javascript">
		$('.seach_foot a').click(function(event){
			event.preventDefault();
			$(this).addClass('sjx').siblings().removeClass('sjx');
			var index=$(this).index();
			$('.bq').eq(index).css('display','block').siblings('.bq').css('display','none')
		})
		var i=0;
		$('.seach').click(function(){
			i++;
			if(i%2==1){
				$('.seach2').css('display','inline-block');
				$('.seach .jt').css('transform','rotate(225deg)');
			}
			else{
				$('.seach2').css('display','none');
				$('.seach .jt').css('transform','rotate(45deg)')
			}
		});
		
		$('.r_nav li:first-child .lis1 span').click(function(e){
			e.stopPropagation();
			$('.lis1').css('display','none');
		})
		$('.r_nav li:first-child').click(function(){
			$('.lis1').css('display','inline-block');
		});
		$('.tops').click(function(){
			 $('html ,body').animate({scrollTop: 0}, 300);
		});
		var timer=0;
		$('.r_nav li:nth-of-type(n+2)').hover(function(){
			clearTimeout(timer);
			$(this).children('div').fadeIn(200);
		},function(){
			$(this).children('.lis2').fadeOut(200);
//			var that=this;
			timer=setTimeout(function(){
				$('.r_nav li:nth-of-type(n+2)').eq(1).children('.lis3').fadeOut(200);
			},200)
			
		})
		
	</script>
</html>